// import {React} form  'react'
import React, { useState } from "react";

import "./AddTenant_billing_management.scss";
import "../../../static/font/iconfont.css";
// import { AddBuildingMap } from "../AddBuildingMap/AddBuildingMap";

import {
    Form,
    Input,
    Button,
    Select,
    Image,
    Modal,
    DatePicker,
    Upload,
} from "antd";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import ImgCrop from "antd-img-crop";

const { Option } = Select;
const { confirm } = Modal;
export const XqsetTenant_billing_management = (props) => {
    const [form] = Form.useForm();

    const layout = {
        labelCol: {
            span: 6,
        },
        wrapperCol: {
            span: 14,
        },
    };
    const tailLayout = {
        wrapperCol: {
            offset: 8,
            span: 16,
        },
    };
    //返回页面
    const backCar = () => {
        props.setXqTenant_billing_management(false);
    };
    const quxiao = () => {
        confirm({
            icon: <ExclamationCircleOutlined />,
            content: "您确定离开此页面吗？",
            cancelText: "取消",
            okText: "确定",
            onOk() {
                //   console.log('OK');
                backCar();
            },
            onCancel() {
                console.log("Cancel");
            },
        });
    };
    const onFinish = (values) => {
        console.log(values);
    };
    // 上传照片
    const [fileList, setFileList] = useState([
        {
            uid: "-1",
            name: "image.png",
            status: "done",
            url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
        },
    ]);

    const onChange = ({ fileList: newFileList }) => {
        setFileList(newFileList);
    };

    const onPreview = async (file) => {
        let src = file.url;
        if (!src) {
            src = await new Promise((resolve) => {
                const reader = new FileReader();
                reader.readAsDataURL(file.originFileObj);
                reader.onload = () => resolve(reader.result);
            });
        }
        const image = new Image();
        image.src = src;
        const imgWindow = window.open(src);
        imgWindow.document.write(image.outerHTML);
    };
    const [fileList1, setFileList1] = useState([
        {
            uid: "-1",
            name: "image.png",
            status: "done",
            url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
        },
    ]);
    const onChange1 = ({ fileList1: newFileList1 }) => {
        setFileList1(newFileList1);
    };

    const onPreview1 = async (file) => {
        let src = file.url;
        if (!src) {
            src = await new Promise((resolve) => {
                const reader = new FileReader();
                reader.readAsDataURL(file.originFileObj);
                reader.onload = () => resolve(reader.result);
            });
        }
        const image = new Image();
        image.src = src;
        const imgWindow = window.open(src);
        imgWindow.document.write(image.outerHTML);
    };

    return (
        <div className="xinzeng">
            <div>
                <div className="tit1">
                    <div>
                        <div>
                            <div></div>
                            <div>租户账单管理详情</div>
                        </div>
                    </div>
                    <div>
                        <span
                            className="iconfont icon-a-16guanbi"
                            onClick={backCar}
                        ></span>
                    </div>
                </div>
                <hr></hr>
                <div className="content">
                    <div>
                        <p>车主基本信息:</p>
                        <Form
                            {...layout}
                            form={form}
                            name="control-hooks"
                            onFinish={onFinish}
                        >
                            <Form.Item
                                name="name"
                                label="车主姓名:"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                name="bianhao"
                                label="联系方式:"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                name="leixing"
                                label="人员性别:"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Select placeholder="" allowClear></Select>
                            </Form.Item>
                            <Form.Item
                                name="yunxing"
                                label="单位名称:"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                name="zhuantai"
                                label="所属楼宇:"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Input />
                                {/* <Select placeholder="" allowClear></Select> */}
                            </Form.Item>
                            <Form.Item
                                name="people"
                                label="房间名称:"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Select placeholder="" allowClear></Select>
                            </Form.Item>

                            <Form.Item
                                name="xiancang"
                                label="现场照片:"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <ImgCrop rotate>
                                    <Upload
                                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                        listType="picture-card"
                                        fileList={fileList1}
                                        onChange={onChange1}
                                        onPreview={onPreview1}
                                    >
                                        {fileList1.length < 5 && "+ Upload"}
                                    </Upload>
                                </ImgCrop>
                            </Form.Item>
                        </Form>
                    </div>
                    <div>
                        <p>车辆账单信息:</p>
                        <div>
                            <div>
                                <Form
                                    {...layout}
                                    form={form}
                                    name="control-hooks"
                                    onFinish={onFinish}
                                >
                                    <Form.Item
                                        name="people"
                                        label="车辆类型:"
                                        rules={[
                                            {
                                                required: true,
                                            },
                                        ]}
                                    >
                                        <Select
                                            placeholder=""
                                            allowClear
                                        ></Select>
                                    </Form.Item>
                                    <Form.Item
                                        name="people"
                                        label="车辆品牌:"
                                        rules={[
                                            {
                                                required: true,
                                            },
                                        ]}
                                    >
                                        <Input />
                                    </Form.Item>
                                    <Form.Item
                                        name="people"
                                        label="开始时间:"
                                        rules={[
                                            {
                                                required: true,
                                            },
                                        ]}
                                    >
                                        <DatePicker className="width_centent" />
                                    </Form.Item>
                                    <Form.Item
                                        name="people"
                                        label="是否缴费:"
                                        rules={[
                                            {
                                                required: true,
                                            },
                                        ]}
                                    >
                                        <Select
                                            placeholder=""
                                            allowClear
                                        ></Select>
                                    </Form.Item>
                                    <Form.Item
                                        name="xiancang"
                                        label="缴费凭证:"
                                        rules={[
                                            {
                                                required: true,
                                            },
                                        ]}
                                    >
                                        <ImgCrop rotate>
                                            <Upload
                                                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                                listType="picture-card"
                                                fileList={fileList}
                                                onChange={onChange}
                                                onPreview={onPreview}
                                            >
                                                {fileList.length < 5 &&
                                                    "+ Upload"}
                                            </Upload>
                                        </ImgCrop>
                                    </Form.Item>
                                </Form>
                            </div>
                            <div>
                                <Form
                                    {...layout}
                                    form={form}
                                    name="control-hooks"
                                    onFinish={onFinish}
                                >
                                    <Form.Item
                                        name="people"
                                        label="车辆号码:"
                                        rules={[
                                            {
                                                required: true,
                                            },
                                        ]}
                                    >
                                        <Input />
                                    </Form.Item>
                                    <Form.Item
                                        name="people"
                                        label="车辆型号:"
                                        rules={[
                                            {
                                                required: true,
                                            },
                                        ]}
                                    >
                                        <Input />
                                    </Form.Item>
                                    <Form.Item
                                        name="people"
                                        label="结束时间:"
                                        rules={[
                                            {
                                                required: true,
                                            },
                                        ]}
                                    >
                                        <DatePicker className="width_centent" />
                                    </Form.Item>
                                    <Form.Item
                                        name="people"
                                        label="缴费金额:"
                                        rules={[
                                            {
                                                required: true,
                                            },
                                        ]}
                                    >
                                        <Input />
                                    </Form.Item>
                                    <Form.Item {...tailLayout}>
                                        <div className="btnts">
                                            <Button
                                                type="primary"
                                                htmlType="submit"
                                            >
                                                保存
                                            </Button>
                                            <Button onClick={quxiao}>
                                                取消
                                            </Button>
                                        </div>
                                    </Form.Item>
                                </Form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};
export default XqsetTenant_billing_management;
